<template>
  <a-card :bordered="false">
    <component @onEdit="handleEdit" @onAdd="handleAdd" @onGoBack="handleGoBack" :record="record"
               :is="currentComponet"></component>
  </a-card>
</template>

<script>
  // 动态切换组件
  import List from './List'
  import Edit from './Edit'
  import Add from './Add'

  export default {
    name: 'ProductTableList',
    components: {
      List,
      Edit,
      Add
    },
    data() {
      return {
        currentComponet: 'List',
        record: ''
      }
    },
    created() {

    },
    methods: {
      handleEdit(record) {
        this.record = record
        this.currentComponet = 'Edit'
      },
      handleGoBack() {
        this.record = ''
        this.currentComponet = 'List'
      },
      handleAdd() {
        this.currentComponet = 'Add'
      }
    },
    watch: {
      '$route.path'() {
        this.record = ''
        this.currentComponet = 'List'
      }
    }
  }
</script>
